<script setup lang="ts">
import {NSpace, NRadio} from 'naive-ui'
import {type Component, ref} from "vue";
import Card from "@/components/Card.vue";
import Tab1 from "@/components/Tab1.vue";
import Tab2 from "@/components/Tab2.vue";

const show = ref<string>('a');


const tap:Record<string, Component> =   {
  "a": Tab1,
  "b": Tab2,
};

function handleChange(e: Event) {
  show.value = (e.target as HTMLInputElement).value;
}
</script>

<template>
  <card title="keep-alive">
    <n-space>
      <n-radio name="tab" @change="handleChange" :checked="show=='a'" value="a">组件1</n-radio>
      <n-radio name="tab" @change="handleChange" :checked="show=='b'" value="b">组件2</n-radio>
    </n-space>
    <div>选择的组件: {{ show == 'a' ? '组件1' : '组件2' }}</div>

    <div class="border p-3 m-3 shadow">
      <!-- <keep-alive exclude="Tab1"> 排除缓存Tab1组件     -->
      <keep-alive>
        <component :is="tap[show]"/>
      </keep-alive>
    </div>
  </card>



</template>

<style scoped>

</style>